/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

//   Define the Grid data and create the Grid
    var myData = [
     [8001844,'Praveen Parsa',9393784873],
     [8001844,'Praveen ',9393784873]
    ];

    var ds = new Ext.data.Store({
        reader: new Ext.data.ArrayReader({}, [
            {name: 'employeeId'},
            {name: 'riderName'},
            {name: 'contactNumber'}        
        ])
    });
    ds.loadData(myData);

   /* // example of custom renderer function
    function italic(value){
        return '<i>' + value + '</i>';
    }*/

    // example of custom renderer function
   /* function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }*/
    // example of custom renderer function
   /* function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }*/
    
    // render rating as "A", "B" or "C" depending upon numeric value.
    function rating(v) {
        if (v == 0) return "A"
        if (v == 1) return "B"
        if (v == 2) return "C"
    }

    // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
    // custom or reusable ColumnModels
    var colModel = new Ext.grid.ColumnModel([
        {id:'employeeId',header: "Employee Id", width: 160, sortable: true, locked:false, dataIndex: 'employeeId'},
        {header: "Rider Name", width: 55, hidden:true, sortable: true,  dataIndex: 'riderName'},
        {header: "Contact Number", width: 55, sortable: true,  dataIndex: 'contactNumber'}
    ]);

   // bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});

/*
 *    Here is where we create the Form
 */
    var gridForm = new Ext.FormPanel({
        id: 'company-form',
        frame: true,
        labelAlign: 'left',
        title: 'Pending Requests in Your Inbox',
        bodyStyle:'padding:5px',
        layout: 'column',    // Specifies that the items will now be arranged in columns
        items: [{
            columnWidth: 0.60,
            layout: 'fit',
            items: {
                xtype: 'grid',
                ds: ds,
                cm: colModel,
                sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true,
                    listeners: {
                        rowselect: function(sm, row, rec) {
                            Ext.getCmp("company-form").getForm().loadRecord(rec);
                        }
                    }
                }),
                autoExpandColumn: 'employeeId',
                height: 350,
                title:'Requests',
                border: true,
                listeners: {
                    render: function(g) {
                        g.getSelectionModel().selectRow(0);
                    },
                    delay: 10 // Allow rows to be rendered.
                }
            }
        },{
            columnWidth: 0.4,
            xtype: 'fieldset',
            labelWidth: 90,
            title:'Rider Details',
            defaults: {width: 140, border:false},    // Default config options for child items
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: false,
            style: {
                "margin-left": "10px", // when you add custom margin in IE 6...
                "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
            },
            items: [{
                fieldLabel: 'Employee Id',
                name: 'employeeId'
            },{
                fieldLabel: 'Rider Name',
                name: 'riderName'
            },{
                fieldLabel: 'Contact Number',
                name: 'contactNumber'
            }, {
                xtype: 'panel',
                layout: 'table',
                layoutConfig: {
                    columns: 4
                },
                anchor: '100%',
                defaults: {
                    border: false,
                    layout: 'form',
                    labelWidth: 15,
                    style: {
                        paddingRight: '10px'
                    }
                },
                buttons:[
                         {
                        	 text:'Accept',
                        	 handler: function() {
                        	Ext.Msg.alert("","Seccess Fully Accepted the Rider Request"); 
                         }
                        		 
                         },
                         {
                        	 text:'Decline',
                        	 handler: function() {
                             	Ext.Msg.alert("","Seccess Fully Declined  the Rider Request"); 
                              }
                         }
                         ]


               
            }]
        }],
        renderTo: 'content'
    });
    
    //  Create Panel view code. Ignore.
    createCodePanel('form-grid.js', 'View code to create this Form');
});